[Feature] 다이얼로그, 윤곽선 버튼 컴포넌트 추가

[nodobi]

작업 내용

• 긍정, 부정 버튼이 존재하는 다이얼로그 컴포넌트 ChoiceDialog를 추가했습니다
• 테두리만 존재하는 버튼 컴포넌트 OutlinedBoxButton을 추가했습니다
• 색 채운 버튼 컴포넌트 FilledButton 의 색상을 개선해봤습니다
• ErrorResponse 에 SerialName 을 명시해주었습니다.

사진

ChoiceDialog

OutlinedBoxButton

FilledButton

하고 싶은 말

자주 사용하는 버튼 색상은 컬러 타입을 지정해서 간단하게 구현하면 좋을 거 같아서 한번 개선해봤어요!

OutlinedButton 이름이 머터리얼에서 사용중이라 컴포넌트 이름을 OutlinedBoxButton 이라고 해줬는데, 일관성을 위해서 FilledButton 컴포넌트 이름을 FilledBoxButton 으로 변경하는건 어떨까요? 🙄

[Jokwanhee]

고생하셨습니다! 저는 컴포넌트를 잘 안 만들어봐서 이렇게라도 살펴보니 사용하기 편리하겠네요!
버튼이랑 다이어로그 만들기는 달인되겠네요 🔨🔨

[Jokwanhee]

이거 추가한 이유가 있을까요? 🤔

[nodobi]

이번에 말해주신 내용으로 찾아봤어요! 😁

Kotlin Serialization, Gson 는 키 값을 명시하는 SerialName, SerializedName 어노테이션이 없으면 필드명을 그대로 키 값으로 사용하여 직렬화하게 됩니다.

키값을 명시해주지 않는 경우 난독화를 하지 않는 디버그 환경에서는 문제가 발생하지 않지만, 난독화가 진행되는 릴리즈 환경에선 난독화된 필드명을 그대로 사용하게 되어 문제가 발생합니다.

검증해보면 좋을 거 같아서 한번 확인해봤어요.

LoginRequest 를 아래처럼 변경하고 릴리즈로 빌드한 뒤 요청을 보내봤어요

data class LoginRequest(
//    @SerializedName(URLConstant.USER.EMAIL)
    val email: String,
//    @SerializedName(URLConstant.USER.PW)
    val password: String,
)

디컴파일 결과

public final class LoginRequest {
  // email
  @NotNull
  public final String a;
  
  // password
  @NotNull
  public final String b;
  
  public LoginRequest(@NotNull String paramString1, @NotNull String paramString2) {
    this.a = paramString1;
    this.b = paramString2;
  }
  
  @NotNull
  public final String a() {
    return this.a;
  }
  
  @NotNull
  public final String b() {
    return this.b;
  }
  
  @NotNull
  public final LoginRequest c(@NotNull String paramString1, @NotNull String paramString2) {
    Intrinsics.p(paramString1, "email");
    Intrinsics.p(paramString2, "password");
    return new LoginRequest(paramString1, paramString2);
  }

  // 이것저것..
}

실제 요청 결과

okhttp.OkHttpClient     in.koreatech.koin                    I  --> POST {로그인 요청 api}
okhttp.OkHttpClient     in.koreatech.koin                    I  Content-Type: application/json; charset=UTF-8
okhttp.OkHttpClient     in.koreatech.koin                    I  Content-Length: 101
okhttp.OkHttpClient     in.koreatech.koin                    I  {"a":"idText@koreatech.ac.kr","b":"1c68b7d2077397c83811c17f6bbf623d75048dc9b15a250c11a9de82bcfdd557"}
okhttp.OkHttpClient     in.koreatech.koin                    I  --> END POST (101-byte body)

디컴파일 결과에서 난독화를 통해 필드명이

• email -> a
• password -> b
  처럼 변경된 것을 확인할 수 있고

변경된 필드명을 기준으로 직렬화가 수행되었기에 요청 결과를 통해 RequestBody 도 아래처럼 변경된 것을 확인할 수 있습니다
{"a":"idText@koreatech.ac.kr","b":"1c68b7d2077397c83811c17f6bbf623d75048dc9b15a250c11a9de82bcfdd557"}

✨ 결론

Proguard 에 의해 필드명이 난독화되고, 이에 따라 key 값을 명시하지 않은 필드는 난독화된 필드명을 key 값으로 하여 직렬화가 진행됩니다!
Proguard 의 설정에서 Gson의 @SerializedName 을 가진 필드, Kotlin Serialization 의 @Serializable 을 가진 클래스의 난독화를 제외하도록 하는 옵션을 추가할 때 까지 명시적으로 키 값을 추가해줘야 할 거 같아요!

[Jokwanhee]

바로 공부해보는 자세 멋집니다 ☺️
저도 다시 복기해보고 좋네요~

[kongwoojin]

고생하셨습니다!

[ThirFir]

색이 더 늘어나진 않겠지만...(설마)
혹시 버튼에 다른 색이 필요하면 enum property를 추가해줘야 한단 점에서 컴포넌트가 좀 한정지어지는 느낌이 듭니다.

컴포즈에선 기본 버튼 색상을 ButtonDefaults.buttonColors()로 제공하고 있는데, 이런 느낌 따라서

ButtonDefaults.primaryButtonColors()
ButtonDefauts.warningButtonColors()
...

이런식으로 이용할 수 있게 해주는 게 좋을 것 같아요.

ButtonDefaults.buttonColors(containerColor = ...)
또 이렇게 named argument 지정해서 특정 색만 바꿀 수 있게 해주는 것처럼도 만들어주면 더 좋을 것 같아요..