Flutter - 회원가입 기능 (Provider)

Provider를 사용해 구현할 기본적인 아키텍처 구조

Store를 만들어서 로그인 이후 세션, 토큰에 대한 관리를 진행할 것이다. 

1. View ->Controller로 요청

2. Controller -> Repository 요청

3. Repository -> Server 요청

--------------------------------

요청하고 돌아온 응답은 Controller가 ViewModel(화면을 위한 Model)에 데이터를 갱신 시켜준다.

그럼 View는  ViewModel를 watch를 하고 있다가 데이터 변동이 일어난다면 다시 그림을 그려주는 방식으로 진행된다.

 

 

현재 회원가입 UI

String username, password, email, phunNum, Category 이렇게 전달한다.

FormField의 controller로 데이터를 가지고 있다가 회원가입 button을 누르면 작성한 값들을 모두 Controller로 전달한다.

1. Controller 작성

  void join({required String username, required String password, required String email, required String phoneNum, required String role}) async {
    // Dto로 변환
    JoinReqDto joinReqDto = JoinReqDto(username: username, password: password, email: email, phoneNum: phoneNum, role: role);

    // Repository 호출
    ResponseDto respDto = await _ref.read(userHttpRepository).join(joinReqDto);
    if (respDto.statusCode == 201) {
      Navigator.popAndPushNamed(context, "/login");
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("회원가입 실패")),
      );
    }
  }

2. Repository 작성

통신은 기본적으로 Json형태로 진행을 한다. 그러기 위해서 Dart오브젝트인 데이터들을 Json으로 변형 해주는 작업이 필요하다.

 

class JoinReqDto {
  String? username;
  String? password;
  String? email;
  String? phoneNum;
  String? role;
  // List<int>? categoryId;

  JoinReqDto({required this.username, required this.password, required this.email, required this.phoneNum, required this.role});

// dynamic -> json
  Map<String, dynamic> toJson() => {
        "username": username,
        "password": password,
        "email": email,
        "phoneNum": phoneNum,
        "role": role,
        // "categoryId": categoryId,
      };
}

Dart오브젝트를 Map형태로 바꾸어 준 이후 jsonEncode로 Json데이터로 파싱 이후 body에 담아서 통신

  Future<ResponseDto> join(JoinReqDto joinReqDto) async {
    String requestBody = jsonEncode(joinReqDto.toJson());
    Response response = await _ref.read(httpConnector).post("/api/join", requestBody);

    return toResponseDto(response); // ResponseDto 응답
  }

 

결과 확인

서버에서 콘솔창에 쿼리문 실행 여부 확인

H2 에서 값 잘 입력되었는지 확인

---

회원가입에서 시간을 뺏긴 곳.

1. 아래 처럼 버튼을 클릭하면 Role값을 회원가입 페이지로 전달 해야했었다.

라우팅 기능에 대해 제대로 이해 하지 못해서 오래걸렸다.

해결 - 버튼을 클릭하면 parmater로 "USER"라는 값을 Join페이지로 넘겨주었다.그리고 Controller에서는 값은 Role값을 받아서 USER,MASTER을 구분해 전달했다.

2. httpStatus통신 코드

서버에서 HttpEntity로 통신값을 100~500사이로 넘겨주고있다.

서버와 통신을 하고난 이후 Response를 -> ResponseDto로 만들어서 응답을 하는 중이다.

toResponseDto를 보면 response.body, 즉 response의 body만 map으로 변경되는 로직으로 만들었다.

 

하지만 httpStatus는 body에 담겨오지 않는다. 그래서 임의로 map에 값을 추가를 했다.

 

---

회원가입 추가할 점.

1. insert시 유효성 검증 

2. 카테고리 체크박스 선택시 현재 List<Category> -> List<int>로 파싱은 완료되었음 , 이 값을 서버에 전달 하는 부분 필요함.