[TIL] 2023.11.07 - 전체 동의하기 구현

 전체 동의하기 구현 

// 정보동의 체크박스 상태
const [allAgreed, setAllAgreed] = useState(false); // 전체동의
const [agreeChecked1, setAgreeChecked1] = useState(false); // 필수동의1
const [agreeChecked2, setAgreeChecked2] = useState(false); // 필수동의2
const [agreeChecked3, setAgreeChecked3] = useState(false); // 필수동의3

const onAgreeCheckedChange = (checkboxNumber, newValue) => {
  // 개별 동의 항목이 변경되었을 때의 이벤트 핸들러
  switch (checkboxNumber) {
    case 1:
      setAgreeChecked1(newValue);
      break;
    case 2:
      setAgreeChecked2(newValue);
      break;
    case 3:
      setAgreeChecked3(newValue);
      break;
    default:
      break;
  }
};

useEffect(() => {
  // 개별 동의 항목이 변경될 때 전체 동의 상태를 업데이트
  if (agreeChecked1 && agreeChecked2 && agreeChecked3) {
    setAllAgreed(true);
  } else {
    setAllAgreed(false);
  }
}, [agreeChecked1, agreeChecked2, agreeChecked3]);

const onClickAllAgreeHandler = () => {
  // 전체 동의를 클릭했을 때의 이벤트 핸들러
  const newValue = !allAgreed;
  setAgreeChecked1(newValue);
  setAgreeChecked2(newValue);
  setAgreeChecked3(newValue);
  setAllAgreed(newValue);
};


// onChange 연결하기
<div>
  <div>
    <input
      type="checkbox"
      checked={allAgreed}
      onChange={onClickAllAgreeHandler}
    />
    <div>전체 동의하기</div>
  </div>
  <div>모든 정보에 동의합니다.</div>

  <div>
    <input
      type="checkbox"
      checked={agreeChecked1}
      onChange={() => onAgreeCheckedChange(1, !agreeChecked1)}
    />
    <div>[필수] 만 14세 이상입니다.</div>
  </div>

  <div>
    <input
      type="checkbox"
      checked={agreeChecked2}
      onChange={() => onAgreeCheckedChange(2, !agreeChecked2)}
    />
    <div>[필수] 개인정보 수집 및 이용 동의</div>
    <div onClick={onClickAgree1}>
      <RightArrow />
    </div>
  </div>

  <div>
    <input
      type="checkbox"
      checked={agreeChecked3}
      onChange={() => onAgreeCheckedChange(3, !agreeChecked3)}
    />
    <div>[필수] 위치정보 수집 및 이용 동의</div>
    <div onClick={onClickAgree2}>
      <RightArrow />
    </div>
  </div>
</div>;