Object.values를 사용하여 이용 약관 동의 기능 구현

Issue

프로젝트 도중 회원 가입 창이 뜨기 전에 이용 약관 동의 창에 대한 디자인 시안이 추가되었다.

 

처음에는 이용 약관 동의 라이브러리를 사용하려고 했지만, 체크 박스 관련 기능은 앞으로도 많이 쓰일 수 있기 때문에 이번 기회에 스스로 문제를 해결해보기로 하였다.

 

Code

우선, 각 체크 박스의 체크 활성에 대한 여부를 저장해주어야 이용 약관 동의 창에서 여러 기능을 사용할 수 있기 때문에 다음과 같이 각 체크 박스의 Key값에 대한 체크 여부를 확인할 수 있는 Boolean Value를 지닌 객체를 state값으로 초기화 하였다.

const [checkInfo, setCheckInfo] = useState({
    webAccessCheck: false,
    privateInfoCheck: false,
    advertiseCheck: false,
  });

각 체크 박스를 클릭하였을 경우 같은 이벤트 동작을 하기 때문에 각 체크 박스에 onClick 이벤트 핸들러를 바인딩해주는 것이 아닌 이들을 감싸고 있는 상위 태그 하나에만 onClick 이벤트 핸들러를 바인딩시켜 주어, event targeting이 발생되도록 코드를 작성하였다.

const checkClickSort = event => {
    const currentTargetElementInfo = nodeName: event.target.nodeName

    if (currentTargetElementInfo.nodeName !== "BUTTON") return;

    const currentTargetButtonSort = event.target.dataset.buttonsort;
    const currentButtonName = event.target.name;

    switch (currentTargetButtonSort) {
      case "checkButton":
        setCheckValue("checkInfo", currentButtonName);
        break;
      case "nextButton":
        goToRegisterForm();
        break;
      default:
        break;
    }
  };

현재 이용 약관 동의 폼에는 크게 체크 버튼과 next 버튼이 있기 때문에 curret.event.target 값을 정확하게 타겟팅해주기 위해 상위 태그 요소에 onClick 이벤트 핸들러에 이를 식별해 줄 수 있는 checkClickSort 콜백 함수를 바인딩해주었다.

 

만약에 현재 클릭된 버튼이 체크 박스 버튼일 경우에는 setCheckValue 함수를 호출하여 주었다.

const setCheckValue = (currentTargetedState, currentButtonName) => {
    if (currentTargetedState === "checkInfo")
      if (currentButtonName === "allCheck") {
        if (isAllChecked()) { 
          setCheckInfo({ //모두 체크가 된 경우 => 다른 체크 값들을 unactive 처리
            ...checkInfo,
            webAccessCheck: false,
            privateInfoCheck: false,
            advertiseCheck: false,
          });
        } else { // 모두 체크가 된 경우 => 다른 체크 값들을 active 처리
          setCheckInfo({
            ...checkInfo,
            webAccessCheck: true,
            privateInfoCheck: true,
            advertiseCheck: true,
          });
        }
      } else {
        setCheckInfo({
          ...checkInfo,
          [currentButtonName]: !checkInfo[currentButtonName],
        });
      }
  };

해당 함수는 크게 두 분기로 나뉜다.

첫 번째는 해당 체크 박스 버튼이 AllCheck 버튼일 경우와 두 번째는 그 외에 Check 버튼을 눌렀을 경우로 분기 및 식별 처리한다.

 

전자일 경우에는 isAllChecked 라는 함수를 호출하여 Object.entries() 메서드를 사용하여 각 체크박스 키 값에 대한 Boolean Value를 확인해주며 최종적으로 순회될때까지 하나라도 false일 경우에는 사전에 정의한 allChecked 변수를 false로 리턴시키며 그 반대는 true를 리턴시키도록 코드를 작성하였다.

const isAllChecked = () => {
    let allChecked = true;
    for (const value of Object.values(checkInfo)) {
      if (!value) allChecked = false; // 하나라도 체크가 되어 있지 않으면 allChecked => false
    }
    return allChecked;
  };

그런 다음 각 체크 박스에 대해 checkActvie() 함수를 바인딩해주고 만약에 해당 값이 true인지 false인지에 따라 style img가 동적으로 바뀌도록 다음과 같이 styled-components를 사용하여 background-image 값을 바꿔주었다.

const CheckIcon = styled.button`
  width: 40px;
  height: 40px;
  background: ${({ active }) =>
      active
        ? "url(./images/icon_active_check.png)"
        : "url(./images/icon_unactive_check.png)"}
    no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
`;

또한 필수 체크 항목이 모두 체크되어 있지 않으면 next button을 disabled 처리해주었다.

const checkPrimaryAccessTerms = () => {
    const { webAccessCheck, privateInfoCheck } = checkInfo;
    if (webAccessCheck && privateInfoCheck) return false;
    else return true;
  };

마지막으로 사용자가 광고 동의를 체크했을 경우에는 서버로 광고 동의 여부 값을 넘겨줘야 하기 때문에 checkCurrentAdvertiseAccess 라는 함수를 Container Components에서 props로 넘겨 받아 광고 동의가 체크가 되었을 경우에 useEffect 내에서 해당 값이 업데이트 되었음을 확인하고 checkCurrentAdvertiseAccess 함수를 호출해주도록 하였다.

 

해당 함수가 호출되면 광고 체크에 대한 true값을 Auth store에 is_receive_email key에 할당해주도록 리듀서를 작성하였다.

// RegisterContainer
const checkCurrentAdvertiseAccess = useCallback(
    isCurrentAdvertiseAccess => {
      dispatch(setCurrentAdvertiseAccess(isCurrentAdvertiseAccess));
    },
    [dispatch]
  );

// AccessTermForm
useEffect(() => {
    checkCurrentAdvertiseAccess(advertiseCheck);
  }, [checkCurrentAdvertiseAccess, advertiseCheck]);

 

동작 영상