refactor: UserInfo 클래스 컴포넌트 함수 분리

[clara-shin]

📝작업 내용

• constants (클래스내부 상수)
• dataLoaders (데이터 로딩)
• dataManagement (데이터 관리)
• eventHandlers (이벤트 핸들러)
• uiHelpers (UI 관련된 헬퍼 함수)
• validatorHelpers (유효성 검사와 관련된 함수 및 이벤트 핸들러)
• UserInfo 클래스

️⃣연관된 이슈

Github issue #213

스크린샷(에러발견)

• 에러: UserInfo에 연결된 ProfileImage.js에서 사진변경버튼 클릭시 발생
• 에러: TypeError: getFormInputData is not a function. (In 'getFormInputData()', 'getFormInputData' is an instance of HTMLElement)
• 에러 처리: UserInfo.js에서 getFormInputData 함수에 .bind(this) 해주었지만 여전히 에러

setEditModeOrShowMode() {
    if (this.isEditOrRegisterPage()) {
      setSaveButtonElemDisable();

      // handleFocusOutEventForValidCheck와 checkIsFormAllInputsValid 호출 시 this 컨텍스트를 바인딩
      handleFocusOutEventForValidCheck(
        this.el,
        this.getFormInputData.bind(this), // 'this' 컨텍스트 바인딩 추가
        this.isAdminPage.bind(this), // 'this' 컨텍스트 바인딩 추가
        this.isEditOrRegisterPage.bind(this) // 'this' 컨텍스트 바인딩 추가
      );

      checkIsFormAllInputsValid(
        this.getFormInputData.bind(this), // 'this' 컨텍스트 바인딩 추가
        this.isAdminPage.bind(this), // 'this' 컨텍스트 바인딩 추가
        this.isEditOrRegisterPage.bind(this) // 'this' 컨텍스트 바인딩 추가
      );
      this.handleFormSubmitEvent();
    }
  }

onFormSubmit = async (event) => {
    event.preventDefault();
    const form = this.el.querySelector('.user-info');
    // checkIsFormAllInputsValid 호출 시 this 컨텍스트를 바인딩
    if (!checkIsFormAllInputsValid(
      this.getFormInputData.bind(this), // 'this' 컨텍스트 바인딩 추가
      this.isAdminPage.bind(this), // 'this' 컨텍스트 바인딩 추가
      this.isEditOrRegisterPage.bind(this) // 'this' 컨텍스트 바인딩 추가
    )) return;

    showDelaySubmitMessage(this.el);
    this.saveUserDataOnSessionStorage(form);
    await saveUserDataWhenFormSubmit(form, this.info);

    setTimeout(() => this.renderEmployeeListPageOrMyPage(), 500);
  };