유효성 검사에 따른 스크롤 이동 (move scroll position to element according to validation)

회원가입을 할 때의 상황과 비슷하게 사용자에게 정보를 입력받고, 필수 정보를 올바르게 입력했는지 검사하는 과정이 필요했다.
검사를 통과하지 못하면 해당 element로 포커싱을 해달라는 요청이 있어서 유효성 검사에 scroll position을 이동시키는 로직을 추가했다. 유효성 검사에 대한 자세한 내용은 생략한다.

로직을 간단하게 설명하면 다음과 같다.

1. 다음 단계로 넘어가는 버튼을 클릭하면 유효성 검사를 한다.
2. 유효성 검사를 통과하지 못한 element 중 가장 위에 있는 element로 포커싱 한다.
   (해당 element가 screen에 보인다면 scroll position을 변경할 필요는 없다.)

element를 효율적으로 순회하기 위해서 className을 통일했고, 반복문을 통해 검사를 통과하지 못한 element를 찾아서 scroll position을 변경했다.

// validations는 유효성 검사의 결괏값을 가진 배열
const validationFocusScroll = (validations: boolean[]) => {
  const elements = document.querySelectorAll('.box') as NodeListOf<HTMLDivElement>

  // 첫 번째 parameter는 현재 값, 두 번째 parameter는 index 값이다.
  validations.some((v, idx) => {
    const element_position = elements[idx]?.getBoundingClientRect()
    if (!v && element_position.top < 0) {
      // 포커싱 할 때 화면 상단에 여유를 주기 위해 50만큼 빼주었다.
      window.scrollBy({
        top: element_position.top - 50,
        behavior: 'smooth'
      })
      return true
    }
    else return false
  })	
}

es6 문법의 배열 메소드는 break를 지원하지 않기 때문에 사용하지 않았고, for문 대신 some() 메소드를 사용했다.
some() 메소드에서 return true는 반복문의 break, return false는 반복문의 continue와 같다.

getBoundingClientRect()는 현재 화면을 기준으로 element의 position 값을 알려준다. 여러 결괏값 중 top을 사용했다. top이 음수이면 현재 화면 바깥에 위치하는 것이기 때문에 scroll position을 변경해 주었고, 다른 element는 더 이상 확인할 필요가 없기 때문에 반복문을 종료했다.

참고1
참고2