defee 회원가입 페이지 UI 수정 및 기능 구현

일주일 간 예비군에 가족여행 때문에 작업을 못했으니 다시 작업을 시작했다.

기존에 만든 회원가입 UI가 애매한 부분이 있어 수정했고, 수정본대로 다시 바꿨다.

회원가입 페이지로 접근하면 보이는 화면이며, 이메일을 입력하면 전송 버튼이 활성화된다.

  void _sendEmail() {
    final email = emailController.text;
    final emailRegExp =
        RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$');

    if (email.isEmpty) {
      print("이메일을 입력해주세요.");
      return;
    } else if (!emailRegExp.hasMatch(email)) {
      print("올바른 이메일 형식이 아닙니다.");
      return;
    }

    setState(() {
      _isEmailVerified = true;
    });

    print("이메일 전송: $email");
  }

버튼 클릭 이벤트를 추가해서 이메일 정규식을 해당 메소드에서 체크하도록 했다.

예외 값을 이메일을 입력하지 않았을 때와 이메일 정규식이 안맞았을 때로 분류했는데, 입력하지 않았을 때는 버튼 자체가 비활성화가 되어있어 굳이 필요하진 않지만 작성은 해두었다.

올바르게 입력했을 경우 _isEmailVerified 값을 true로 변경해주는데, 해당 값이 true가 되면 안보이던 코드 입력창이 나타나게 된다.

            if (_isEmailVerified) ...[
              InputBtnBox(
                labelText: "Code",
                controller: codeController,
                buttonText: "인증",
              ),
              const SizedBox(height: 10),
            ],

신기하게 dart언어는 if문을 사용해 출력여부를 결정할 때 ...[]을 사용하는 것 같더라

...[] 문법은 dart에서 사용하는 스프레드 연산자이며 플러터에서 위젯을 조건부로 추가하거나, 리스트 안에 동적으로 요소를 삽입할 때 자주 사용한다고 한다.

해당 문법을 사용하는 이유는 플러터의 위젯 트리가 리스트 형태로 관리되기 때문에 children 리스트를 사용하는 위젯에서 자연스럽게 리스트에 요소를 추가할 수 있기 때문이며, if문에 사용했을 때 조건문이 참일 때 안에 작성한 위젯을 출력할 수 있게 된다.

그리고 결정적으로 dart에서 위젯을 조건부로 추가하려면 삼항연산자를 사용하거나, null값을 반드시 반환해야 했는데, ...[] 문법을 사용하면 그럴 필요없이 바로 작성할 수 있어 편리하다고 한다.

 

입력값도 버튼이 있는 입력값과 비밀번호 입력값 일반 입력값 전부 필요 요소가 달라서 3개로 분리했다.

안에서 추가적인 처리를 하면 하나의 코드에서 로직이 될 건데, 현재로는 안에서 전부 나누기가 어려워 위젯을 분리했다.

비밀번호 입력창도 기존에 눈 아이콘이 입력창 안에 있었지만, UI 수정으로 바깥으로 빠지게 되어 기존 input 위젯에 작성되있던 비밀번호 로직을 지우고 새로 만들었다.

 

  void _validateForm() {
    setState(() {
      _isFormValid = emailController.text.isNotEmpty &&
          (_isEmailVerified ? codeController.text.isNotEmpty : true) &&
          usernameController.text.isNotEmpty &&
          passwordController.text.isNotEmpty &&
          confirmPasswordController.text.isNotEmpty &&
          passwordController.text == confirmPasswordController.text;
    });
  }

그리고 유효성 검사를 통해 블로그 링크를 제외한 모든 입력값을 입력했을때만 회원가입 버튼이 활성화 되게 했다.

 

회원가입에서 남은 부분은 서버와 연동하여 이메일 인증, 닉네임 중복확인, 코드 확인, 회원가입 api 들이 남았는데, 이건 백엔드에서 작업 상황에 따라 다시 손대야 할 부분이여서 일단 이대로 유지하려고 한다.